<template>
  <div
    class="modal-box"
    :class="{'modal-active':isNew}"
  >
    <div class="modal-content">
      <div class="modal-title">
        <!-- <button class="modal-close" @click.stop="cancel">关闭</button> -->
        <div>
          {{title}}
        </div>
      </div>
      <div class="modal-body">
        <div class="_content">
          <div>{{detail}}</div>
          <div
            class="_progress"
            v-show="isDownPgk"
          >
            <div class="_progress_box">
              <div
                class="_progress_bar"
                :style="{width:percent+'%'}"
              ></div>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <!-- <button class="modal-cancel" @click.stop="cancel"><span>取消</span></button> -->
        <button
          class="modal-save"
          v-show="show"
          @click.stop="save"
        ><span>更新</span></button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      isNew: false,
      show: false,
      title: '更新',
      detail: '',
      percent: 0, //下载进度
      isDownPgk: false//是否下载安装包
    }
  },
  created () {
    this.message()
  },
  methods: {
    message () {
      const ipcRenderer = require('electron').ipcRenderer
      ipcRenderer.send('checkForUpdate')
      let isNew = false
      let downloaded = false
      /** type
       * error 检查更新错误
       * checking 正在检查更新
       * updateAva 检测到新版本
       * updateNotAva 最新版本
       */
      ipcRenderer.on('message', (event, type) => {
        // console.log('当前检查更新状态：', type)
        if (type === 'updateAva') {
          isNew = true
          this.isNew = isNew
          this.detail = "已经检查到新版本,正在下载..."
          // console.log(this.detail)
          if (downloaded) {
            this.show = true
            this.percent = 100;
            this.detail = "检测到新版本，请立刻更新！！！"
          }
        }
      })
      ipcRenderer.on('downloadProgress', (event, progressObj) => {
        //下载进度百分比
        const percent = progressObj.percent || 0;
        this.percent = parseInt(percent, 10);
        if (!this.isDownPgk) {
          this.isDownPgk = true;
        }
      })
      ipcRenderer.on('isUpdateNow', () => {
        // console.log('新版本下载完成')
        // 下载完成
        downloaded = true
        if (isNew) {
          this.show = true
          this.detail = "检测到新版本，请立刻更新！！！"
        }
      })
    },
    updater () {
      try {
        const ipcRenderer = require('electron').ipcRenderer
        ipcRenderer.send('isUpdateNow')
      } catch (e) {
        console.log(e)
      }
    },
    save () {
      if (this.show) {
        this.updater()
      }
    },
    cancel () {
      this.isNew = false
    }
  }
}
</script>

<style scoped>
._content {
  text-align: center;
  font-size: 16px;
  margin: 40px 0;
}
._progress {
  margin-top: 10px;
}
._progress_box {
  height: 15px;
  width: 200px;
  margin: auto;
  background: #ddd;
}
._progress_bar {
  height: 100%;
  width: 0;
  background: #447dfe;
}
</style>

